/* 筛选容器样式 */
.filter-container {
    margin-top: 40px;
}

/* 分类筛选容器样式 */
.category-filter {
    display: flex;
    flex-wrap: nowrap; /* 禁止子元素换行 */
    gap: 12px; /* 子元素之间的间距 */
    white-space: nowrap; /* 防止文字换行 */
    border-bottom: 1px solid #e5e5e5; /* 浅灰色下划线作为分割线 */
    padding-bottom: 20px; /* 增大分割线与下方分类按钮的距离 */
    margin-bottom: 20px; /* 增大分割线与上方排序按钮的距离 */
}

/* 分类筛选项样式 */
.category-item {
    margin-right: 50px; /* 增大分类按钮之间的间隔 */
    cursor: pointer;
    color: #666666; /* 深灰色文字 */
    transition: color 0.3s;
    font-size: 16px; /* 分类按钮字体调大 */
    position: relative; /* 为下划线定位做准备 */
}

.category-item.active {
    color: #009688; /* 绿色选中色 */
    font-weight: normal; /* 字体不加粗 */
}

.category-item.active::after {
    content: "";
    position: absolute;
    bottom: -10px; /* 控制下划线与文字的间距 */
    left: 50%; /* 从中间开始 */
    transform: translateX(-50%); /* 水平居中 */
    width: 30%; /* 下划线长度，可根据需要调整 */
    height: 4px;
    background-color: #009669; /* 绿色下划线 */
}

.category-item:hover {
    color: #009688;
}

/* 排序筛选容器样式 */
.sort-filter {
    display: flex;
    align-items: center;
}

/* 排序筛选项样式 */
.sort-item {
    margin-right: 10px; /* 减小右侧间距，让按钮更紧凑 */
    cursor: pointer;
    border: none; /* 默认不显示边框 */
    padding: 5px 8px; /* 减小内边距，让按钮更窄 */
    border-radius: 4px; /* 圆角 */
    transition: background-color 0.3s, color 0.3s;
    font-size: 14px; /* 增大排序按钮字体大小，但不超过分类字体 */
    background-color: transparent; /* 按钮默认透明背景 */
}

.sort-item.active {
    color: #009688; /* 绿色文字 */
    border: 1px ; /* 点击时显示边框 */
    background-color: #f0f0f0; /* 点击时浅灰色背景 */
}

.sort-item:hover {
    color: #009688; /* 鼠标悬浮时字体变绿 */
    border: none; /* 鼠标悬浮时不显示边框 */
    background-color: #f9f9f9; /* 鼠标悬浮时轻微变色的背景 */
}